<template>
    <!--类似html标签-->
    <el-card class="box-card">

        <el-row :gutter="20">
            <!--搜索框-->
            <el-col :span="8">
                <el-input placeholder="请输入内容" v-model="userName.userName">
                    <el-button slot="append" icon="el-icon-search" @click="findAll()"></el-button>
                </el-input>
            </el-col>

            <!--添加按钮-->
            <el-button type="primary" @click="addDialogVisible = true">添加</el-button>
        </el-row>

        <!--表格组件-->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="userId" label="用户ID" style="width: 25%">
            </el-table-column>
            <el-table-column prop="userPassword" label="用户密码" style="width: 25%">
            </el-table-column>
            <el-table-column prop="userName" label="用户姓名" style="width: 25%">
            </el-table-column>
            <el-table-column prop="userRole" label="用户权限" style="width: 25%">
            </el-table-column>
            <el-table-column label="操作" style="width: 25%">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" @click="openupdate(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 page-size当前显示多少页  total显示总条数 current-page当前页-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[1, 3, 5, 7]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>


        <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="30%">
            <el-form label-width="70px">
                <el-form-item label="用户ID" prop="text">
                    <el-input v-model="addUser.userId"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="text">
                    <el-input v-model="addUser.userPassword"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名" prop="email">
                    <el-input v-model="addUser.userName"></el-input>
                </el-form-item>
                <el-form-item label="用户权限" prop="email">
                    <el-input v-model="addUser.userRole"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertUser()">确 定</el-button>
            </span>
        </el-dialog>


        <el-dialog title="修改用户" :visible.sync="updateDialogVisible" width="30%">
            <el-form label-width="70px">
                <el-form-item label="用户ID" prop="text">
                    <el-input v-model="update.userId"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="text">
                    <el-input v-model="update.userPassword"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名" prop="email">
                    <el-input v-model="update.userName"></el-input>
                </el-form-item>
                <el-form-item label="用户权限" prop="email">
                    <el-input v-model="update.userRole"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateUser()">确 定</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>
    
    
<script>
export default {
    data() {
        return {//定义变量        （类似java创建  int aa,String b,List aaa）
            //创建了一个tableData的集合比变量
            tableData: [],
            addDialogVisible: false,
            addUser: {
                userId: '',
                userPassword: '',
                userName: '',
                userRole: ''
            },
            updateDialogVisible: false,
            update: {
                userId: '',
                userPassword: '',
                userName: '',
                userRole: ''
            },
            userName: { "userName": "" },
            page: 1,
            total: 0,
            currentpage: 1
        }
    },
    created() {// 页面运行第一加载，就会立马执行这个里面的  代码

        this.findAll()


    },
    methods: {//定义增、删、改、查的方法    （可以也多个方法，多个方法用 ，逗号隔开）
        async findAll() {
            this.userName.page = 1
            this.page = 1
            //alert("正在请求数据库数据")
            //  此处真正的去请求后台数据库查询的接口
            const { data: res } = await this.$http.post('/user/findAll', this.userName)
            //alert(JSON.stringify(res))//    返回结果是 json格式  调试打印观看时候转换为字符串
            this.tableData = res;
            this.tableData = res.dataList
            this.total = res.count
        },
        async insertUser() {
            const { data: res } = await this.$http.post('/user/addAll', this.addUser)
            if (res.code == "200") {
                this.$message.success(res.message)
            }
            this.addDialogVisible = false;
            this.addUser = {
                userId: '',
                userPassword: '',
                userName: '',
                userRole: ''
            }
            this.findAll()
        },
        async deleteUser(currentRow) {
            //提示消息 标题文本 提示信息
            const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(error => //只有一个return 只有一个参数 可以省略return {} ()
                error  //返回给confirmResult接收
            )
            if (confirmResult !== 'confirm') {
                return this.$message.info('已经取消删除')
            }
            const { data: res } = await this.$http.get('/user/deleteUser/' + currentRow.userId, {})
            this.findAll()
        },
        async openupdate(currentRow) {
            const { data: res } = await this.$http.get('/user/findById/' + currentRow.userId, {})
            // alert(JSON.stringify(res))
            this.update = res
            this.updateDialogVisible = true
        },
        async updateUser() {
            //  修改功能
            const { data: res } = await this.$http.post('/user/updateUser/', this.update)
            if (res.code == "200") {
                this.$message.success(res.message)
            }
            this.updateDialogVisible = false
            this.findAll()
        },
        async handleCurrentChange(v) {
            this.userName.page = v
            this.page = v
            const { data: res } = await this.$http.post('/user/findAll', this.userName)
            this.tableData = res.dataList
            this.total = res.count

        },
        async handleSizeChange(v) {
            this.userName.size = v
            this.userName.page = 1
            this.page = 1
            const { data: res } = await this.$http.post('/user/findAll', this.userName)
            this.tableData = res.dataList
            this.total = res.count
        }
    }
}
</script>